<template>
  <div class="login-container">
    <div class="overlay"></div>
    <div class="logo">趣写</div>
    <h1>欢迎回来！</h1>
    <div class="window-controls">
      <button style="display: flex;align-items: center;" @click="minimize">
        <el-icon>
          <Minus />
        </el-icon></button>
      <button style="display: flex;align-items: center;" @click="maximize">
        <el-icon>
          <FullScreen />
        </el-icon></button>
      <button style="display: flex;align-items: center;" @click="handleClose()">
        <el-icon>
          <Close />
        </el-icon></button>
    </div>
    <form class="login-form" @submit.prevent="handleSubmit()">
      <input type="text" placeholder="用户名" v-model="username" />
      <input type="password" placeholder="密码" v-model="password" />
      <button type="submit" class="login-button">登录</button>
      <!-- 勾选框 -->
      <label class="remember-me">
        <input type="checkbox" v-model="loginStore.remember" />
        记住我
      </label>
    </form>
    <p>新用户？<a href="#" @click="openRegist()">注册</a></p>
  </div>
  <registered v-if="loginStore.isregistedOpen" />
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
import { login } from '../../api/login';
import router from '../../router';
import { useLoginStore } from '../../stores/login';
import registered from './component/registered.vue';
import { getByUserName } from '../../api/login';
import {useUserStore} from '../../stores/user'

const username = ref('');
const password = ref('');
const loginStore = new useLoginStore()
const userStore = new useUserStore()


const minimize = () => {
  window.myApi.miniWindows()
};

const maximize = () => {
  window.myApi.maximizeWindow();
};

function handleClose() {
  ElMessageBox.confirm(
    '您想最小化到托盘还是直接退出',
    '退出',
    {
      confirmButtonText: '直接退出',
      cancelButtonText: '最小化到托盘',
      distinguishCancelAndClose: true,
      type: 'warning',
    }
  )
    .then(() => {
      // 直接退出
      window.myApi.quitApp()
    })
    .catch((action) => {
      if (action === 'cancel') {
        // 最小化到托盘
        window.myApi.closeWindows()
      }
    })
}

async function handleSubmit() {
  let params = new URLSearchParams();
  params.append("username", username.value);
  params.append("password", password.value);
  params.append("remember", loginStore.remember);
  try {
    const res = await login(params);
    if (res.code == 200) {
      const currentDate = new Date();
      const expiryTime = new Date(currentDate.setDate(currentDate.getDate() + 1)).getTime(); // 1 天后
      const years = new Date(currentDate.setFullYear(currentDate.getFullYear() + 1)).getTime(); // 1 年后

      localStorage.setItem("token", res.data);
      localStorage.setItem("username", username.value);
      saveId(username.value)
      if (loginStore.remember === false) {
        localStorage.setItem('tokenExpiry', expiryTime.toString());
      } else {
        localStorage.setItem('tokenExpiry', years.toString());
      }

      router.push('/ForYou');
      ElNotification({
        title: '成功',
        message: res.message,
        type: 'success',
        showClose: false,
      });
    } else if (res.code == 400) {
      ElNotification({
        title: '失败',
        message: res.message,
        type: 'error',
        showClose: false,
      });
    }
  } catch (error) {
    console.error("登录失败:", error);
    ElNotification({
      title: '失败',
      message: error,
      type: 'error',
      showClose: false,
    });
  }
}

function openRegist() {
  loginStore.isregistedOpen = true
}

async function saveId(name) {
  const params = new URLSearchParams
  params.append("username",name)
  await getByUserName(params).then(res=>{
   localStorage.setItem("userId",res.data.id)  
  })
}
</script>

<style scoped>
/* 全局重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  /* 确保 body 没有边距 */
}

.login-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: linear-gradient(135deg, #6a4db1, #3a3a6a);
  color: white;
  text-align: center;
  font-family: 'Arial', sans-serif;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(58, 58, 106, 0.5);
  z-index: 1;
  border-radius: 15px;
}

.logo {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 20px;
  z-index: 2;
}

h1 {
  font-size: 2rem;
  margin: 10px 0;
  z-index: 2;
}

.login-form {
  display: flex;
  flex-direction: column;
  width: 300px;
  z-index: 2;
}

input {
  padding: 12px;
  margin: 10px 0;
  border: none;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: border 0.3s;
}

input:focus {
  outline: none;
  border: 2px solid #7a5acd;
}

.login-button {
  padding: 12px;
  background-color: #7a5acd;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.login-button:hover {
  background-color: #6a4db1;
  transform: scale(1.05);
}

p {
  margin-top: 20px;
  z-index: 2;
}

a {
  color: #7a5acd;
  text-decoration: none;
  font-weight: bold;
}

.window-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 10px;
  z-index: 2;
}

.window-controls button {
  background: linear-gradient(135deg, #7a5acd, #6a4db1);
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: 5px;
  padding: 8px 12px;
  transition: background-color 0.3s, transform 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.window-controls button:hover {
  background: linear-gradient(135deg, #6a4db1, #7a5acd);
  transform: scale(1.05);
}

.remember-me {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: 14px;
}
</style>